<template>
  <div class="app-container">

    <!-- 添加或修改车辆维修对话框 -->
    <el-dialog :title="title" :visible="openWx" :before-close="cancel" width="900px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="车牌号" prop="carPlateNo">
              <el-input v-model="form.carPlateNo" placeholder="请选择车辆" clearable :style="{width: '100%'}" :readonly="true">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="维修开始时间" prop="repairStartDate">
              <el-date-picker clearable size="small" v-model="form.repairStartDate" type="datetime"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择维修开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="故障描述" prop="faultDesc">
              <el-input v-model="form.faultDesc" type="textarea" placeholder="请输入故障描述" :maxlength="100" show-word-limit
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="维修厂名称" prop="serviceName">
              <el-input v-model="form.serviceName" placeholder="请输入维修厂名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修厂报价" prop="repairShopQuotation">
              <el-input v-model="form.repairShopQuotation" placeholder="请输入维修厂报价" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="维修内容">
              <el-input v-model="form.repairContent" type="textarea" placeholder="请输入维修内容" :maxlength="100"
                show-word-limit :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="用户支付金额" prop="userPay">
              <el-input v-model="form.userPay" placeholder="请输入用户支付金额"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平台支付金额" prop="platformPay">
              <el-input v-model="form.platformPay" placeholder="请输入平台支付金额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="保险支付金额" prop="insurancePay">
              <el-input v-model="form.insurancePay" placeholder="请输入保险支付金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总金额">
              <el-input v-model="totalPay" placeholder="自动计算" readonly/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="是否提供备用车" prop="isSpareCar">
              <el-radio-group v-model="form.isSpareCar">
                <el-radio v-for="dict in dict.type.business_yes_no" :key="dict.value" :label="parseInt(dict.value)">
                  {{dict.label}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备用车车牌号" prop="spareCarNo" v-if="form.isSpareCar==1">
              <el-input v-model="form.spareCarNo" placeholder="请输入备用车车牌号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="旧件名称" prop="oldItems">
              <el-input v-model="form.oldItems" placeholder="请输入旧件名称" />
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="submitBtnLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    addRepair,
    updateRepair,
  } from "@/api/maintenance/repair";

  import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
  export default {
    name: "Repair",
    dicts: ['car_status', 'maintenance_state', 'business_yes_no'],
    components: {
        MmvTitle
    },
    computed: {
      totalPay() {
        return Number(this.form.userPay)+Number(this.form.platformPay)+Number(this.form.insurancePay)||0
      }
    },
    props: {
      carId: {
        type: String,
        default: ''
      },
      carPlateNo: {
        type: String,
        default: ''
      },
      openWx: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        submitBtnLoading: false,
        showCarBox:false,
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 车辆维修表格数据
        repairList: [],
        // 弹出层标题
        title: "",
        feedbackOpen: false,
        detailsOpen: false,


        // 表单参数
        form: {
          isSpareCar: 2,
          carId: this.carId,
          carPlateNo: this.carPlateNo,
        },
        // 表单校验
        rules: {
          carPlateNo: [{
            required: true,
            message: '车牌号不能为空',
            trigger: 'change'
          }],
          repairStartDate: [{
            required: true,
            message: '维修开始时间不能为空',
            trigger: 'change'
          }],
          repairEndDate: [{
            required: true,
            message: '维修结束时间不能为空',
            trigger: 'change'
          }],
          faultDesc: [{
            required: true,
            message: '故障描述不能为空',
            trigger: 'change'
          }],
          serviceName: [{
            required: true,
            message: '维修厂名称不能为空',
            trigger: 'change'
          }],
          repairShopQuotation: [
            {required: true,message: '维修厂报价不能为空',trigger: 'change'},
            {validator(rule, value, callback){
              if(!value||Number(value)==0){
                return callback();
              }
              if (!Number(value)){
                callback(new Error('价格错误'))
              }
              if (Number(value)<0){
                 callback(new Error('价格错误'))
              }
              return callback();
            }},
          ],
          repairContent: [{
            required: true,
            message: '维修内容不能为空',
            trigger: 'change'
          }],
          userPay: [{
            required: true,
            message: '用户支付金额不能为空',
            trigger: 'change'
          },
          {validator(rule, value, callback){
              if(!value||Number(value)==0){
                return callback();
              }
              if (!Number(value)){
                callback(new Error('价格错误'))
              }
              if (Number(value)<0){
                 callback(new Error('价格错误'))
              }
              return callback();
            }},],
          platformPay: [{
            required: true,
            message: '平台支付金额不能为空',
            trigger: 'change'
          },{validator(rule, value, callback){
              if(!value||Number(value)==0){
                return callback();
              }
              if (!Number(value)){
                callback(new Error('价格错误'))
              }
              if (Number(value)<0){
                 callback(new Error('价格错误'))
              }
              return callback();
            }},],
          totalPay: [{
            required: true,
            message: '总金额不能为空',
            trigger: 'change'
          },{validator(rule, value, callback){
              if(!value||Number(value)==0){
                return callback();
              }
              if (!Number(value)){
                callback(new Error('价格错误'))
              }
              if (Number(value)<0){
                 callback(new Error('价格错误'))
              }
              return callback();
            }},],
          insurancePay: [{
            required: true,
            message: '保险支付金额',
            trigger: 'change'
          },{validator(rule, value, callback){
              if(!value||Number(value)==0){
                return callback();
              }
              if (!Number(value)){
                callback(new Error('价格错误'))
              }
              if (Number(value)<0){
                 callback(new Error('价格错误'))
              }
              return callback();
            }},],
        }
      };
    },
    created() {
    },
    methods: {
      // 取消按钮
      cancel() {
        this.reset();
        this.$emit("close")
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          applyNo: null,
          carId: this.carId,
          carPlateNo: this.carPlateNo,
          vinNo: null,
          carStatus: 0,
          repairStatus: 0,
          repairStartDate: null,
          repairEndDate: null,
          faultDesc: null,
          serviceName: null,
          deptId: null,
          operator: null,
          delFlag: null,
          repairShopQuotation: null,
          repairContent: null,
          userPay: null,
          platformPay: null,
          insurancePay: null,
          totalPay: null,
          isSpareCar: 2,
          createBy: null,
          spareCarNo: null,
          oldItems: null,
          createTime: null,
          updateBy: null,
          repairFeedback: null,
          remark: null,
          updateTime: null,
          tenantId: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.submitBtnLoading = true;
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateRepair(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.cancel()
              });
            } else {
              addRepair(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.cancel()
              });
            }
          }
        });
        setTimeout(()=> {
          this.submitBtnLoading = false;
        },2e3)
      },
    }
  };
</script>
<style scoped="scoped">
  /deep/ .el-date-editor.el-input,
  .el-date-editor.el-input__inner{
    width: 100% !important;
  }
</style>
